<template lang="pug">
.home-wrap
	.header-tools(:style="{backgroundColor:toolsBackgroundColor}")
		.city-search
			span 台州市
			i
		.main-search
			i
			span 搜索医院、医生或科室
		.help
			i
		.info
			i
	swiper.slider-wrap(
	autoplay,
	indicator-dots,
	circular,
	indicator-color="#B3B3B3",
	indicator-active-color="#FFFFFF")
		swiper-item(v-for="(item,index) in siwperList" :key="index")
			img.slider-img(:src="item.ad_img_url" @click="jumpWebView(item.ad_link,item.ad_title,item.ad_link_opentype)")
	.module-wrap
		.module-list
			.module-item(v-for="(item,index) in moduleList" :key="index")
				div
					img(:src="item.img")
					.name {{item.name}}
		.module-helper
			.out.helper-item
				.item-wrap
					.title 门诊助手
					.hint 支付看病费用<br/>还款
			.in.helper-item
				.item-wrap
					.title 住院助手
					.hint 预缴金充值<br/>清单查询
	hos-info
	news-info
</template>

<script>
import yuyue from '@/assets/image/common/s_menu_yuyue.png'
import more from '@/assets/image/common/s_menu_more.png'
import jiuzhenka from '@/assets/image/common/s_menu_jiuzhenka.png'
import jiezhong from '@/assets/image/common/s_menu_jiezhong.png'
import fapiao from '@/assets/image/common/s_menu_fapiao.png'
import dangan from '@/assets/image/common/s_menu_dangan.png'
import baogao from '@/assets/image/common/s_menu_baogao.png'
import yufu from '@/assets/image/common/s_menu_yufu.png'
import newsInfo from '@/components/news-info'
import hosInfo from '@/components/hos-info'
export default {
	data() {
		return {
			siwperList: [],
			moduleList: [],
			toolsBackgroundColor: []
		}
	},
	computed: {},
	mounted() {
		this.moduleList = [
			{ name: '预约挂号', img: yuyue, path: '' },
			{ name: '报告查询', img: baogao, path: '' },
			{ name: '健康档案', img: dangan, path: '' },
			{ name: '预防接种', img: jiezhong, path: '' },
			{ name: '先诊疗后付费', img: yufu, path: '' },
			{ name: '电子就诊卡', img: jiuzhenka, path: '' },
			{ name: '电子发票', img: fapiao, path: '' },
			{ name: '更多', img: more, path: '' }
		]
		this.getSwiperInfo()
		// this.getLoginInof()
	},
	onPullDownRefresh() {},
	onPageScroll(e) {
		let actHeight = 100
		let top = e.scrollTop
		if (top >= actHeight) top = actHeight
		let overNum = top / actHeight
		this.toolsBackgroundColor = 'rgba(38,147,255,' + overNum + ')'
	},
	methods: {
		jumpWebView(url, title, openType) {
			url = this.wx.arrayBufferToBase64(url)
			title = this.wx.arrayBufferToBase64(title)
			this.$router.push({
				path: '/views/webview/webview',
				query: {
					url: url,
					title: title
				}
			})
		},
		getSwiperInfo() {
			this.api.jtApi
				.getSwiperInfo({
					adpos_type: '0103'
				})
				.then(data => {
					if (data.ret_code === '0') {
						this.siwperList = data.details.detail
					} else {
					}
				})
				.catch(() => {})
		},
		getLoginInof() {
			this.wx.login({
				success(res) {
					if (res.code) {
						this.wx.request({
							url:
								'https://api.weixin.qq.com/sns/jscode2session?appid=wxec1271d51f291f6e&secret=57a475d7b646513734635b046712d4f9&grant_type=authorization_code',
							data: {
								js_code: res.code
							},
							success: function(res) {
								console.log(res.data)
							}
						})
					} else {
						console.log('登录失败！' + res.errMsg)
					}
				}
			})
		}
	},
	components: {
		newsInfo: newsInfo,
		hosInfo: hosInfo
	}
}
</script>

<style lang="stylus">
		.header-tools
			font-size 28px
			color white
			position fixed
			left 0
			top 0
			width 100%
			display flex
			align-items center
			justify-content center
			height 80px
			z-index 1
			.city-search
				display flex
				align-items center
				i
					margin-left 8px
					width 24px
					height 16px
					centerBackground("../../assets/image/common/arrow_down_white.png")
			.main-search
				width 400px
				height 60px
				margin 0 24px
				background-color rgba(255,255,255,0.2)
				border-radius 30px
				display flex
				align-items center
				justify-content center
				span
					font-size 26px
					margin-left 10px
				i
					width 32px
					height 32px
					centerBackground("../../assets/image/home/icon_search.png")
			.help
				i
					width 44px
					height 44px
					centerBackground("../../assets/image/home/icon_help.png")
			.info
				margin-left 24px
				i
					width 44px
					height 44px
					centerBackground("../../assets/image/home/icon_info.png")
		.slider-wrap
			width 100%
			height 200px
			.slider-img
				width: 100%
		.module-wrap
			position relative
			background-color white
			padding mainPadding
			padding-top 330px
			.module-list
				background-color white
				position absolute
				left mainPadding
				right mainPadding
				top -60px
				height 350px
				box-shadow:0 4px 30px 0 rgba(0,0,0,0.05)
				border-radius 10px
				display flex
				flex-direction row
				flex-wrap wrap
				.module-item
					width 25%
					height 50%
					display flex
					align-items center
					justify-content center
					text-align center
					font-size 26px
					color blackFontColor
					img
						width 80px
						height 80px
					.name
						margin-top 4px
			.module-helper
				width 100%
				display flex
				justify-content space-between
				.helper-item
					width 330px
					height 190px
					border-radius 8px
					background-repeat no-repeat
					background-position  right top
					.item-wrap
						width 100%
						height 100%
						background-repeat no-repeat
						background-size 160px 190px
						background-position right top
						color white
						padding mainPadding
						box-sizing border-box
						.title
							font-size 36px
							line-height 50px
							font-weight 600
						.hint
							font-size 26px
							line-height 36px
							margin-top 10px
				.out
					background linear-gradient(270deg,rgba(121,219,98,1) 0%,rgba(22,192,106,1) 100%)
					.item-wrap
						background-image url("../../assets/image/home/i_menzhen.png")
				.in
					background linear-gradient(90deg,rgba(35,138,240,1) 0%,rgba(35,228,225,1) 100%)
					.item-wrap
						background-image url("../../assets/image/home/i_zhuyuan.png")
</style>
